<!--
 * @description: 文件描述
 * @version: 0.0.1
 * @author: xxx
 * @Date: 2025-03-17 15:33:00
-->
<template>
  <view class="check_content">
    <block v-for="(item, index) in optionList" :key="index">
      <view class="check_item">
        <view class="check_icon" @click.stop="changeItem(index)">
          <img v-if="selectedIndices.includes(index)" class="icon_img"
            src="https://100000063-1252208446.file.myqcloud.com/images/问卷调查/check.png" />
          <img v-else class="icon_img" src="https://100000063-1252208446.file.myqcloud.com/images/问卷调查/check_def.png" />
        </view>
        <view class="check_text"> {{ item.option }}</view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    optionList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedIndices: [], // 存储所有选中的选项索引
    };
  },
  mounted() {
    console.log(this.optionList, "optionListoptionList");
  },
  methods: {
    changeItem(index) {
      const selectedIndex = this.selectedIndices.indexOf(index);
      if (selectedIndex === -1) {
        // 如果未选中，则添加到选中数组
        this.selectedIndices.push(index);
      } else {
        // 如果已选中，则从选中数组中移除
        this.selectedIndices.splice(selectedIndex, 1);
      }
      const checkList = []
      this.selectedIndices.forEach((i) => {
        checkList.push(this.optionList[i])
      })
      this.$emit("checkChangeIndex", checkList);
    },
    clear(){
      this.selectedIndices = [];
    }
  },
};
</script>

<style lang="less">
.check_content {
  width: 100%;

  .check_item {
    display: flex;
    width: 654rpx;
    margin-bottom: 24rpx;

    .check_icon {
      width: 24rx;
      height: 40rpx;
      display: flex;
      align-items: center;
      margin-right: 24rpx;

      .icon_img {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}
</style>